<script setup lang="ts">
import type { DateModelType } from 'element-plus'

defineEmits<{
  (e: 'search'): void
}>()

const query: {
  code: string
  period: string | number
  range: [DateModelType, DateModelType]
} = shallowReactive({
  code: 'xinyeshiye低压总进',
  period: '3',
  range: ['', ''],
})

const disabledDate = (date: Date) => date > new Date()

defineExpose({
  query,
})
</script>

<template>
  <ElForm inline :model="query">
    <ElFormItem label="指标名称">
      <ElSelect v-model="query.code">
        <ElOption value="xinyeshiye低压总进" label="xinyeshiye低压总进" />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="周期" class="free">
      <ElSelect v-model="query.period">
        <ElOption value="1" label="实时" />
        <ElOption value="2" label="小时" />
        <ElOption value="3" label="日" />
        <ElOption value="4" label="月" />
        <ElOption value="5" label="季" />
        <ElOption value="6" label="年" />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="时间区间">
      <ElDatePicker
        v-model="query.range"
        type="daterange" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
        :disabled-date="disabledDate"
      />
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="$emit('search')" />
    </ElFormItem>
  </ElForm>
</template>

<style scoped>
.free,
.free :deep(.el-select) {
  width: 140px;
}
.free :deep(.el-input) {
  min-width: auto !important;
}
</style>
